<template>
    <div class="box" style="display: flex; justify-content: space-between;">
        <div class="header-left">
            <div>
                <span class="yotpo">yotpo.</span>
            </div>

            <div class="headerjs">进思教育有限责任公司</div>
            <div class="header-input" style="position: relative;">
                <!-- <el-input class="inp" v-model="input"></el-input> -->
                <input style="width: 220px; height: 25px;border-radius: 5px;border:1px solid #fff;" class="ip"
                    type="text">
                <span style="width: 1px; height: 16px;background: #fff;position: absolute;top:25px;right:125px;"></span>
                <img src="../assets/切图 11.png" style="position: absolute;top: 25px; right: 105px;" alt="">
                <span style="color: #fff; margin-left: 30px;">下午好</span>
            </div>
        </div>
        <div class="header-right">
            <img src="../assets/切图 13.png" alt="" style="width: 20px;height: 20px;margin-right: 20px;">
            <img src="../assets/切图 14.png" alt="" style="width: 20px;height: 20px;margin-right: 20px;">
            <img src="../assets/圆形 1@2x.png" alt="" style="width: 30px;height: 30px;margin-right: 20px;">
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            input: ''
        }
    }
}
</script>
<style lang="scss" scoped>
.header-left {
    display: flex;

    .yotpo {
        background: rgb(37, 103, 255);
        // height: 30px;
        color: #fff;
        font-weight: bold;
    }

    .headerjs {
        color: #fff;
    }

    .header-input {
        width: 340px;
        height: 25px;
        margin-left: 100px;

        .ip {
            width: 220px;
            height: 25px;
            background-color: rgb(115, 120, 138);
        }

    }
}
</style>